<template>
  <div :class="['row-image', !border && 'border-none']">
    <div class="cover">
      <img :src="cover" />
    </div>

    <div class="content">
      <div class="heading">
        <div class="title van-multi-ellipsis--l2">
           <van-tag v-show="hot" plain color="#EC5431" class="hot-tag">热点文章</van-tag>
          {{ title }}
        </div>
        <div class="desc">{{ desc }}</div>
      </div>

      <div class="footer">
        <div class="star">
          <van-rate v-model="star" readonly size="12" color="#FF7002" />
        </div>
        <div class="read">
          <van-icon name="eye-o" :style="{ marginRight: '6px' }" />
          {{ read }}W阅读
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Icon, Rate, Tag } from 'vant'

Vue.use(Icon)
  .use(Rate)
  .use(Tag)

export default {
  props: {
    cover: {
      type: String,
      default: ''
    },

    hot: {
      type: Boolean,
      default: false
    },

    title: {
      type: String,
      default: ''
    },

    desc: {
      type: String,
      default: ''
    },

    star: {
      type: Number,
      default: 0
    },

    read: {
      type: [Number, String],
      default: ''
    },

    border: {
      type: Boolean,
      default: true
    }
  }
}
</script>

<style lang="less" scoped>
.row-image {
  padding: 17px 0;
  margin: 0 17px;
  border-top: 0.5px solid #eeeeee;
  display: flex;

  .cover {
    img {
      width: 125px;
      height: 90px;
      border-radius: 4px;
    }
  }

  .content {
    flex: 1;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    height: 90px;
    padding-left: 12.5px;

    .heading {
      .title {
        font-size: 17px;
        color: #444444;
        font-weight: 500;

        .hot-tag {
          margin: 0 -4px;
          transform: scale(0.8, 0.8);
        }
      }

      .desc {
        color: #999999;
        font-size: 12px;
        margin-top: 6px;
      }
    }

    .footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 10px;
      color: #dddddd;

      .read {
        display: flex;
        align-items: center;
      }
    }
  }
}

.border-none {
  border: none;
  padding-top: 0;
}
</style>